<template>
  <view class="container">
		<view class="search-box">
			<u-search
				v-model="listParams.name"
				:showAction="false"
				bgColor="#F1F1F1"
				placeholder="请输入課程名稱"
			/>
		</view>
		<view class="form-box">
			<view class="form-item flex-space-b">
				<view class="form-label">
					課程分類：
				</view>
				<picker :value="listParams.typeId" :range="classifyList" range-key="dictLabel" class="form-cont" @change="changeClassify">
					<view class="form-select flex-space-b">
						<text :class="{ sel: listParams.typeId }">{{ listParams.typeId ? getClassifyText(listParams.typeId) : '请選擇課程分類' }}</text>
						<u-icon name="arrow-down" size="15" color="#C0C4CC" />
					</view>
				</picker>
			</view>
			<view class="form-item flex-space-b">
				<view class="form-label">
					上課日：
				</view>
				<picker :value="listParams.weeks" :range="dict.type['w_db_weeks']" range-key="value" class="form-cont" @change="changeWeeks">
					<view class="form-select flex-space-b">
						<text :class="{ sel: listParams.weeks }">{{ listParams.weeks ? dict.type['w_db_weeks'][Number(listParams.weeks)].label : '请選擇上課日' }}</text>
						<u-icon name="arrow-down" size="15" color="#C0C4CC" />
					</view>
				</picker>
			</view>
			<view class="form-item flex-space-b">
				<view class="form-label">
					上課時間段：
				</view>
				<picker :value="listParams.code_query_class" :range="dict.type['code_query_class']" range-key="label" class="form-cont" @change="changeClass">
					<view class="form-select flex-space-b">
						<text :class="{ sel: listParams.code_query_class }">{{ listParams.code_query_class ? dict.type['code_query_class'][Number(listParams.code_query_class)].label : '请選擇上課時間段' }}</text>
						<u-icon name="arrow-down" size="15" color="#C0C4CC" />
					</view>
				</picker>
			</view>
			<view class="form-item flex-space-b no-border">
				<view class="form-label">
					開課日期：
				</view>
				<picker :value="listParams.code_query_startdate" :range="dict.type['code_query_startdate']" range-key="label" class="form-cont" @change="changeStartdate">
					<view class="form-select flex-space-b">
						<text :class="{ sel: listParams.code_query_startdate }">{{ listParams.code_query_startdate ? dict.type['code_query_startdate'][Number(listParams.code_query_startdate)].label : '请選擇開課日期' }}</text>
						<u-icon name="arrow-down" size="15" color="#C0C4CC" />
					</view>
				</picker>
			</view>
			<view v-if="listParams.code_query_startdate == 1 || listParams.code_query_startdate == 2" class="form-item flex-space-b no-border">
				<view class="form-label">
					開始：
				</view>
				<picker :value="listParams.code_query_startdateBegin" :end="listParams.code_query_startdateEnd" mode="date" class="form-cont" @change="changeStartDate">
					<view class="form-select flex-space-b">
						<text :class="{ sel: listParams.code_query_startdateBegin }">{{ listParams.code_query_startdateBegin ? listParams.code_query_startdateBegin : '请選擇開始日期' }}</text>
						<u-icon name="arrow-down" size="15" color="#C0C4CC" />
					</view>
				</picker>
			</view>
			<view v-if="listParams.code_query_startdate == 2" class="form-item flex-space-b no-border">
				<view class="form-label">
					結束：
				</view>
				<picker :value="listParams.code_query_startdateEnd" :start="listParams.code_query_startdateBegin" mode="date" class="form-cont" @change="changeEndDate">
					<view class="form-select flex-space-b">
						<text :class="{ sel: listParams.code_query_startdateEnd }">{{ listParams.code_query_startdateEnd ? listParams.code_query_startdateEnd : '请選擇結束日期' }}</text>
						<u-icon name="arrow-down" size="15" color="#C0C4CC" />
					</view>
				</picker>
			</view>
		</view>
		<view class="action-list flex-space-b">
			<u-button
				color="#E9930A"
				text="確定"
				:customStyle="{ width: '310rpx', height: '78rpx', borderRadius: '16rpx' }"
				@click="handleSearch"
			/>
			<u-button
				color="#E9930A"
				text="重置"
				plain
				:customStyle="{ width: '310rpx', height: '78rpx', borderRadius: '16rpx' }"
				@click="handleRest"
			/>
		</view>
	</view>
</template>

<script>
  export default {
		dicts: [
			'w_db_weeks',
			'code_query_startdate',
			'code_query_class',
		],
		data() {
			return {
				listParams: {
					name: '',
					typeId: '',
					weeks: '',
					code_query_startdate: '',
					code_query_class: '',
					code_query_startdateBegin: '',
					code_query_startdateEnd: ''
				},
				classifyList: uni.getStorageSync('classifyList')
			}
		},
		onLoad(o) {
			Object.assign(this.listParams, JSON.parse(o.listParams))
		},
		methods: {
			changeClassify(e) {
				this.listParams.typeId = this.classifyList[Number(e.detail.value)].dictValue
			},
			getClassifyText(typeId) {
				return this.classifyList.find(v => v.dictValue === typeId).dictLabel
			},
			changeWeeks(e) {
				this.listParams.weeks = e.detail.value
			},
			changeClass(e) {
				this.listParams.code_query_class = e.detail.value
			},
			changeStartdate(e) {
				this.listParams.code_query_startdate = e.detail.value
			},
			changeStartDate(e) {
				this.listParams.code_query_startdateBegin = e.detail.value
			},
			changeEndDate(e) {
				this.listParams.code_query_startdateEnd = e.detail.value
			},
			handleRest() {
				this.listParams = {
					name: '',
					typeId: '',
					weeks: '',
					code_query_startdate: '',
					code_query_class: '',
					code_query_startdateBegin: '',
					code_query_startdateEnd: ''
				}
			},
			handleSearch() {
				const pages = getCurrentPages()
				const beforePage = pages[pages.length - 2]
				beforePage.$vm.initPage(this.listParams)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #fff;
	}
	.search-box {
		padding: 32rpx 20rpx 16rpx;
	}
	.form-box {
		padding: 0 30rpx;
		.form-item {
			padding: 32rpx 0;
			border-bottom: 1px solid #EEEEEE;
			&.no-border {
				border-bottom: 0;
			}
			&.flex-space-b {
				.form-label {
					min-width: 180rpx;
					width: 180rpx;
					margin: 0 16rpx 0 0;
				}
				.form-cont {
					flex: 1;
				}
			}
			.form-label {
				color: #303133;
				font-size: 30rpx;
				margin-bottom: 16rpx;
			}
			/deep/ .form-cont {
				.u-radio-group {
					justify-content: flex-end;
				}
				.tip {
					color: #3C9CFF;
					font-size: 24rpx;
					padding-top: 10rpx;
					line-height: 32rpx;
				}
				.form-select {
					background-color: #F3F4F6;
					padding: 0 24rpx;
					height: 72rpx;
					border-radius: 8rpx;
					font-size: 30rpx;
					font-weight: 400;
					text {
						color: #C0C4CC;
						&.sel {
							color: #333;
						}
					}
				}
			}
		}
	}
	.action-list {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		padding: 20rpx 30rpx 30rpx;
		box-sizing: border-box;
		/deep/ .u-button__text {
			font-size: 30rpx!important;
		}
	}
</style>
